import React from 'react'
import routes from '../../router/routes'
import { Menu } from 'antd'
import { useLocation, useNavigate } from 'react-router-dom'
import style from './style.module.css'
export const SiderMenu: React.FC = () => {
	const navigate = useNavigate()
	const location = useLocation()
	const items = routes.filter(v => {
		// 根据路由表字段 meta.hidden 进行过滤
		// v.meta.hidden  === true   不要
		// v.meta.hidden  === false   要
		return !v.meta.hidden
	}).map(v => {
		// 数据格式转化
		return {
			label: v.meta.title, key: v.path
		}
	})
	return (
		<div>
			<Menu
				items={items}
				onClick={({ key }) => navigate(key)}
				className={style['menu']}
				selectedKeys={[location.pathname]}
			></Menu>
		</div>
	)
}



